window.onload = function(){
    var container = document.querySelector("#container");

    var canvas = document.createElement("canvas");
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;
    container.appendChild(canvas);
    
    var gl = canvas.getContext("webgl");
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    function drawTriangle(gl, pointsCollection) {
        var VERTEX_SHADER_SOURCE =
            'attribute vec4 a_Position;\n' +
            'void main(){\n' +
            'gl_Position = a_Position;\n' +
            'gl_PointSize = 10.0;\n' +
            '}\n';
    
        var FRAGMENT_SHADER_SOURCE =
            'void main(){\n' +
            'gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n' +
            '}';
    
        // 1.创建着色器对象
        var vertex_shader_object = gl.createShader(gl.VERTEX_SHADER);
        var fragment_shader_object = gl.createShader(gl.FRAGMENT_SHADER);
    
        // 2.装载着色器资源
        gl.shaderSource(vertex_shader_object, VERTEX_SHADER_SOURCE);
        gl.shaderSource(fragment_shader_object, FRAGMENT_SHADER_SOURCE);
    
        // 3.编译着色器
        gl.compileShader(vertex_shader_object);
        gl.compileShader(fragment_shader_object);
    
        // 4.创建程序
        var program = gl.createProgram();
    
        // 5.附着着色器对象到program
        gl.attachShader(program, vertex_shader_object);
        gl.attachShader(program, fragment_shader_object);
    
        // 6.链接program
        gl.linkProgram(program);
    
        // 7.使用program
        gl.useProgram(program);
    
        // 1. 创建float32数组
        var vertices = new Float32Array(pointsCollection);
    
        // 2. 创建缓冲区对象
        var vertexBuffer = gl.createBuffer();
    
        // 3. 坐标数组绑定到缓冲区对象
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    
        var a_Position = gl.getAttribLocation(program, "a_Position");
    
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    
        gl.enableVertexAttribArray(a_Position);
    
        gl.clearColor(.0, .0, .0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
    
    
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, pointsCollection.length / 2);
    
        return pointsCollection;
    };
    
    canvas.style.cursor = "pointer";
    var res = drawTriangle(gl, [0.0, 0.0, 0.0, 1.0, 1.0, 0.0])
    var final;
    
    canvas.onmousedown = function (e) {
        canvas.style.cursor = "move"
        var startX = (e.clientX - canvas.width / 2) / (canvas.width / 2);
        var startY = (canvas.height / 2 - e.clientY) / (canvas.height / 2);
    
        canvas.onmousemove = function (me) {
            var endX = (me.clientX - canvas.width / 2) / (canvas.width / 2);
            var endY = (canvas.height / 2 - me.clientY) / (canvas.height / 2);
            var dX = (endX - startX);
            var dY = (endY - startY);
            var newRes = [res[0] + dX, res[1] + dY, res[2] + dX, res[3] + dY, res[4] + dX, res[5] + dY];
            final =  drawTriangle(gl, newRes);
        };
    };
    
    canvas.onmouseup = function () {
        canvas.style.cursor = "pointer";
        canvas.onmousemove = null;
        res = final;
    };
}